<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: dark)"><meta name="generator" content="Hexo 6.3.0">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,700,700italic%7CZCOOL+QingKe+HuangYou:300,300italic,400,400italic,700,700italic%7CNoto+Sans+Simplified+Chinese:300,300italic,400,400italic,700,700italic%7CJetBrains+Mono:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="/lib/@fortawesome/fontawesome-free/css/all.min.css" integrity="sha256-HtsXJanqjKTc8vVQjO4YMhiqFoXkfBsjBWcX91T1jr8=" crossorigin="anonymous">
  <link rel="stylesheet" href="/lib/animate.css/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="/lib/@fancyapps/ui/dist/fancybox/fancybox.css" integrity="sha256-RvRHGSuWAxZpXKV9lLDt2e+rZ+btzn48Wp4ueS3NZKs=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"wyatex.online","root":"/","images":"/images","scheme":"Pisces","darkmode":true,"version":"8.18.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"mac"},"fold":{"enable":false,"height":500},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":true,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":true}}</script><script src="/js/config.js"></script>

    <meta name="description" content="下面是来自transformers.js的作者的技术分享视频：Transformers.js：Web 上的最新机器学习技术">
<meta property="og:type" content="article">
<meta property="og:title" content="使用Transformers.js在Web上进行机器学习">
<meta property="og:url" content="https://wyatex.online/AI/Transformers-js-1/index.html">
<meta property="og:site_name" content="Wyatex&#96;s blog">
<meta property="og:description" content="下面是来自transformers.js的作者的技术分享视频：Transformers.js：Web 上的最新机器学习技术">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/1.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/2.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/3.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/4.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/5.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/6.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/7.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/8.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/9.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/10.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/11.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/12.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/13.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/14.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/15.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/16.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/17.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/18.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/19.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/20.awebp">
<meta property="og:image" content="https://wyatex.online/AI/Transformers-js-1/21.awebp">
<meta property="article:published_time" content="2023-12-05T11:18:19.000Z">
<meta property="article:modified_time" content="2023-12-05T11:36:46.137Z">
<meta property="article:author" content="Wyatex">
<meta property="article:tag" content="JavaScript">
<meta property="article:tag" content="AI">
<meta property="article:tag" content="Machine Learning">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://wyatex.online/AI/Transformers-js-1/1.awebp">


<link rel="canonical" href="https://wyatex.online/AI/Transformers-js-1/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://wyatex.online/AI/Transformers-js-1/","path":"AI/Transformers-js-1/","title":"使用Transformers.js在Web上进行机器学习"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>使用Transformers.js在Web上进行机器学习 | Wyatex`s blog</title>
  








  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">Wyatex`s blog</p>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="搜索" role="button">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签<span class="badge">97</span></a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类<span class="badge">26</span></a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档<span class="badge">155</span></a></li><li class="menu-item menu-item-编程"><a href="/programming/" rel="section"><i class="fa fa-book fa-fw"></i>编程</a></li><li class="menu-item menu-item-蹲坑读物"><a href="/%E5%B9%B2%E8%B4%A7/%E5%BC%80%E5%8F%91%E4%BA%A4%E6%B5%81%E7%BE%A4%E5%88%86%E4%BA%AB%E8%AE%B0%E5%BD%95/" rel="section"><i class="fa fa-book fa-fw"></i>蹲坑读物</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8B%E7%BB%8D"><span class="nav-number">2.</span> <span class="nav-text">介绍</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFTransformers-js"><span class="nav-number">2.1.</span> <span class="nav-text">什么是Transformers.js</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%9C%A8Web%E4%B8%8A%E8%BF%90%E8%A1%8C"><span class="nav-number">2.2.</span> <span class="nav-text">为什么要在Web上运行</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%83%E6%98%AF%E6%80%8E%E4%B9%88%E5%B7%A5%E4%BD%9C%E7%9A%84%E5%91%A2"><span class="nav-number">2.3.</span> <span class="nav-text">它是怎么工作的呢</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BA%94%E7%94%A8"><span class="nav-number">3.</span> <span class="nav-text">应用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BC%80%E5%A7%8B%E5%B0%9D%E8%AF%95"><span class="nav-number">4.</span> <span class="nav-text">开始尝试</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%AD%E9%9F%B3%E8%BD%AC%E6%96%87%E6%9C%AC"><span class="nav-number">4.1.</span> <span class="nav-text">语音转文本</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%89%A9%E4%BD%93%E6%A3%80%E6%B5%8B"><span class="nav-number">4.2.</span> <span class="nav-text">物体检测</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%B6%E4%BB%96%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B5%81%E6%B0%B4%E7%BA%BF"><span class="nav-number">4.3.</span> <span class="nav-text">其他的一些流水线</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%88%91%E8%83%BD%E5%9C%A8%E5%93%AA%E9%87%8C%E4%BD%BF%E7%94%A8Transformers-js"><span class="nav-number">5.</span> <span class="nav-text">我能在哪里使用Transformers.js</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A8%A1%E5%9E%8B"><span class="nav-number">6.</span> <span class="nav-text">自定义模型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Transformer-js%E7%9A%84%E6%9C%AA%E6%9D%A5%E6%98%AF%E4%BB%80%E4%B9%88"><span class="nav-number">7.</span> <span class="nav-text">Transformer.js的未来是什么</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Wyatex"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">Wyatex</p>
  <div class="site-description" itemprop="description">这里是我用来做笔记的网站哟~</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">155</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">26</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">97</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author animated">
      <span class="links-of-author-item">
        <a href="https://github.com/wyatex" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;wyatex" rel="noopener me" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:wyatex@qq.com" title="E-Mail → mailto:wyatex@qq.com" rel="noopener me" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>

        </div>
      </div>
    </div>

    
    <div class="sidebar-inner sidebar-blogroll">
      <div class="links-of-blogroll animated">
        <div class="links-of-blogroll-title"><i class="fa fa-globe fa-fw"></i>
          链接
        </div>
        <ul class="links-of-blogroll-list">
            <li class="links-of-blogroll-item">
              <a href="https://antfu.me/" title="https:&#x2F;&#x2F;antfu.me&#x2F;" rel="noopener" target="_blank">Anthony Fu</a>
            </li>
            <li class="links-of-blogroll-item">
              <a href="https://www.codesky.me/" title="https:&#x2F;&#x2F;www.codesky.me&#x2F;" rel="noopener" target="_blank">CodeSky</a>
            </li>
            <li class="links-of-blogroll-item">
              <a href="https://learn.lianglianglee.com/" title="https:&#x2F;&#x2F;learn.lianglianglee.com&#x2F;" rel="noopener" target="_blank">技术文章摘抄</a>
            </li>
        </ul>
      </div>
    </div>
        <div class="pjax">
        </div>
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wyatex.online/AI/Transformers-js-1/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="Wyatex">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Wyatex`s blog">
      <meta itemprop="description" content="这里是我用来做笔记的网站哟~">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="使用Transformers.js在Web上进行机器学习 | Wyatex`s blog">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          使用Transformers.js在Web上进行机器学习
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>
      

      <time title="创建时间：2023-12-05 19:18:19 / 修改时间：19:36:46" itemprop="dateCreated datePublished" datetime="2023-12-05T19:18:19+08:00">2023-12-05</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/AI/" itemprop="url" rel="index"><span itemprop="name">AI</span></a>
        </span>
    </span>

  
    <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv">
      <span class="post-meta-item-icon">
        <i class="far fa-eye"></i>
      </span>
      <span class="post-meta-item-text">阅读次数：</span>
      <span id="busuanzi_value_page_pv"></span>
    </span>
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody"><blockquote>
<p>下面是来自transformers.js的作者的技术分享视频：<a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV19c411B7QU/">Transformers.js：Web 上的最新机器学习技术</a></p>
</blockquote>
<span id="more"></span>

<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>本文介绍Hugging Face是如何将其AI生态系统引入到Web中的。通过transformers.js，您可以直接在浏览器中运行Hugging Face的transfrmers模型。</p>
<h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><h3 id="什么是Transformers-js"><a href="#什么是Transformers-js" class="headerlink" title="什么是Transformers.js"></a>什么是Transformers.js</h3><p>简单介绍一下什么是transformers.js，transformers.js是一个库，提供了在JavaScript中运行先进预训练模型的高级抽象。这意味着任何人都可以轻松地将机器学习功能添加到他们的Web应用程序中。</p>
<img data-src="/AI/Transformers-js-1/1.awebp" class="">

<p>而且我们还有一个了不起的开源社区，汇集了来自世界各地真正看到Web上机器学习潜力的人。在NPM上周下载量也达到了15万次。迄今为止人们已经用它创造了举世瞩目的成就。经过这个库只有几个月的历史，但是我们已经支持了对50多种最流行的模型架构。</p>
<img data-src="/AI/Transformers-js-1/2.awebp" class="">

<h3 id="为什么要在Web上运行"><a href="#为什么要在Web上运行" class="headerlink" title="为什么要在Web上运行"></a>为什么要在Web上运行</h3><p>为什么HuggingFace要探索WebML技术呢，答案可以在HuggingFace的使命中找到：让优秀的机器学习走向大众。我们知道HuggingFace上有大量的库，但是这些库都是Python实现的，这意味着大部分Web开发者不容易利用他们。因此Transformers.js的目标就是降低Web开发者的使用门槛。这个库还旨在帮助开发者构建前所未见的Web应用，这将在稍后进行展示。说到软件分发，Web真的是一骑绝尘，如今一旦有新模型或者应用推出，人们首先看到的都是Web Demo。无干扰，免安装，我相信没人会不喜欢。</p>
<h3 id="它是怎么工作的呢"><a href="#它是怎么工作的呢" class="headerlink" title="它是怎么工作的呢"></a>它是怎么工作的呢</h3><p>那么它是如何工作的呢，用户可以使用HuggingFace的Optimum库，将他们的pytorch、tensorflow或者JAX模型转换为ONNX模型。当然如果想直接使用预转换的模型，可以跳过这一步，直接使用HuggingFace上的模型。</p>
<img data-src="/AI/Transformers-js-1/3.awebp" class="">

<p>接下来编写JavaScript代码，最简单方法是使用popeline函数，正如前面提到的，这个函数把机器学习背后的许多复杂任务抽象化了，用户不必关系如何实现，就可以完成任务。</p>
<p>如果用户希望对整个过程有更精细的控制，可以使用公开的Model、Tokenizer、Processsor类以及其他相关函数。最后，打开浏览器运行项目，就这么简单。</p>
<h2 id="应用"><a href="#应用" class="headerlink" title="应用"></a>应用</h2><p>下面我们再来看看使用Transformers.js构建的应用程序，首先是<a target="_blank" rel="noopener" href="https://huggingface.co/spaces/mithril-security/blind_chat">BlindChat</a>，一个基于浏览器的ChatGPT版本，使用的模型是经过指令微调的FLAN-T5版本，能力可能不如ChatGPT强大，但仍然能胜任一些工作。</p>
<img data-src="/AI/Transformers-js-1/4.awebp" class="">

<p>来看个例子，问一下：“什么是爱情？”，这些对话都将只在本设备上产生，第一次运行时，浏览器将会下载并缓存模型，可以看到效果还算不错。</p>
<img data-src="/AI/Transformers-js-1/5.awebp" class="">

<blockquote>
<p>我看了一下，大概会下载800MB左右的小模型，好像这个模型不支持中文，用中文提问就不能正常回答了。</p>
</blockquote>
<p>虽然有一些提问无法回答，但是这个项目旨在演示基于浏览器的机器学习的隐私优势，因为没有任何数据被传输到其他地方。可以想象将类似的应用部署为浏览器拓展，充当您浏览Web时的个人助理，<strong>这样您就无需担心敏感数据（比如银行卡和支付密码）泄露到某个服务器</strong>。随着模型越来越小越来越强大，我相信很快就能见到类似的应用了。</p>
<p>除了对话式AI，我们还要为特定用例进行微调的模型示例，比如代码生成。即使是相对较小的3亿参数模型，也能产生高质量的代码，</p>
<blockquote>
<p>项目演示地址：<a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Xenova/ai-code-playground">https://huggingface.co/spaces/Xenova/ai-code-playground</a> 右键-generate，生成代码。默认的模型大概300MB</p>
</blockquote>
<img data-src="/AI/Transformers-js-1/6.awebp" class="">

<p>另一个使用十大语言模型的例子是对语言翻译和转换器，transformers.js也支持这个功能，比如这个例子，使用的是一个600亿参数的模型，通过200多种不同语言的训练。</p>
<img data-src="/AI/Transformers-js-1/7.awebp" class="">

<blockquote>
<p>项目演示地址：<a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Xenova/react-translator">https://huggingface.co/spaces/Xenova/react-translator</a> 好像翻译成中文不是那么准确，hhhh</p>
</blockquote>
<p>下一个例子是语音转文本的例子：<a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Xenova/whisper-web">Whisper Web</a></p>
<img data-src="/AI/Transformers-js-1/8.awebp" class="">

<p>你可以从URL加载、从本地加载或者使用麦克风录制，一旦音频加载完毕，点击Transcribe Audio，即可开始转录，您可以导出为txt或者json。你也可以选择其他的模型，如果你的带宽比较小，也可以选择一个量化版本。即使是量化版的小模型，只有40MB左右，也能产出高质量的转录文本。<a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Xenova/whisper-web">Whisper Web</a>还支持多语言转录和翻译，这意味着可以选择大于100种不同语言进行转录或者翻译成英语。</p>
<p><strong>这个例子强调了在设备上使用机器学习处理敏感数据的重要性，比如麦克风或者摄像头输入。很多情况下用户不希望将他们的语音录音发送到服务器，他们更希望只在他们自己的设备上进行处理。</strong></p>
<p>另一个有趣的应用是<a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Xenova/semantic-image-search">语义图像搜索</a>，在这个例子中，用户会下载一个包含25000个剪辑的嵌入式数据库，大小大概在50MB左右。加载完成后，就可以用自然语言搜索图像，比如搜索一下cat</p>
<img data-src="/AI/Transformers-js-1/9.awebp" class="">

<p>或者我们搜索一下更具象化的，比如叼着棍子的狗：</p>
<img data-src="/AI/Transformers-js-1/10.awebp" class="">

<p>有意思的是，加载完模型和数据库后，文本计算只需要大概50毫秒，即可在25000张图像中进行相似性搜索，这没有使用任何酷炫的向量数据库，只是普通的JavaScript代码。</p>
<p>最后一个案例，<a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Xenova/doodle-dash">doodle-dash</a> <em>（不知道怎么翻译了，涂鸦冲鸭？哈哈哈哈）</em> ， 这是一个实时的ML驱动的网页游戏，完全在浏览器中运行，感谢Transformers.js。游戏灵感来源于谷歌的 <strong>Quick,Draw</strong> ，你根据一个单词进行涂鸦，神经网络有20秒的时间来猜测你在画什么。事实上，我们使用了他们的训练数据来训练我们的轻量级草图检测模型。</p>
<img data-src="/AI/Transformers-js-1/11.awebp" class="">

<p>因为检测是在浏览器实时运行，所以根本不用担心网络或者服务器延迟。</p>
<p>上面展示的例子都是开源的，而且有demo网站进行体验</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Links</th>
</tr>
</thead>
<tbody><tr>
<td>Whisper Web</td>
<td>Speech recognition w&#x2F; Whisper</td>
<td><a target="_blank" rel="noopener" href="https://github.com/xenova/whisper-web">code</a>, <a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Xenova/whisper-web">demo</a></td>
</tr>
<tr>
<td>Doodle Dash</td>
<td>Real-time sketch-recognition game</td>
<td><a target="_blank" rel="noopener" href="https://huggingface.co/blog/ml-web-games">blog</a>, <a target="_blank" rel="noopener" href="https://github.com/xenova/doodle-dash">code</a>, <a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Xenova/doodle-dash">demo</a></td>
</tr>
<tr>
<td>Code Playground</td>
<td>In-browser code completion website</td>
<td><a target="_blank" rel="noopener" href="https://github.com/xenova/transformers.js/blob/HEAD/examples/code-completion/">code</a>, <a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Xenova/ai-code-playground">demo</a></td>
</tr>
<tr>
<td>Semantic Image Search (client-side)</td>
<td>Search for images with text</td>
<td><a target="_blank" rel="noopener" href="https://github.com/xenova/transformers.js/blob/HEAD/examples/semantic-image-search-client/">code</a>, <a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Xenova/semantic-image-search-client">demo</a></td>
</tr>
<tr>
<td>Semantic Image Search (server-side)</td>
<td>Search for images with text (Supabase)</td>
<td><a target="_blank" rel="noopener" href="https://github.com/xenova/transformers.js/blob/HEAD/examples/semantic-image-search/">code</a>, <a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Xenova/semantic-image-search">demo</a></td>
</tr>
<tr>
<td>Vanilla JavaScript</td>
<td>In-browser object detection</td>
<td><a target="_blank" rel="noopener" href="https://scrimba.com/scrim/cKm9bDAg">video</a>, <a target="_blank" rel="noopener" href="https://github.com/xenova/transformers.js/blob/HEAD/examples/vanilla-js/">code</a>, <a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Scrimba/vanilla-js-object-detector">demo</a></td>
</tr>
<tr>
<td>React</td>
<td>Multilingual translation website</td>
<td><a target="_blank" rel="noopener" href="https://github.com/xenova/transformers.js/blob/HEAD/examples/react-translator/">code</a>, <a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Xenova/react-translator">demo</a></td>
</tr>
<tr>
<td>Text to speech (client-side)</td>
<td>In-browser speech synthesis</td>
<td><a target="_blank" rel="noopener" href="https://github.com/xenova/transformers.js/blob/HEAD/examples/text-to-speech-client/">code</a>, <a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Xenova/text-to-speech-client">demo</a></td>
</tr>
<tr>
<td>Browser extension</td>
<td>Text classification extension</td>
<td><a target="_blank" rel="noopener" href="https://github.com/xenova/transformers.js/blob/HEAD/examples/extension/">code</a></td>
</tr>
<tr>
<td>Electron</td>
<td>Text classification application</td>
<td><a target="_blank" rel="noopener" href="https://github.com/xenova/transformers.js/blob/HEAD/examples/electron/">code</a></td>
</tr>
<tr>
<td>Next.js (client-side)</td>
<td>Sentiment analysis (in-browser inference)</td>
<td><a target="_blank" rel="noopener" href="https://github.com/xenova/transformers.js/blob/HEAD/examples/next-client/">code</a>, <a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Xenova/next-example-app">demo</a></td>
</tr>
<tr>
<td>Next.js (server-side)</td>
<td>Sentiment analysis (Node.js inference)</td>
<td><a target="_blank" rel="noopener" href="https://github.com/xenova/transformers.js/blob/HEAD/examples/next-server/">code</a>, <a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Xenova/next-server-example-app">demo</a></td>
</tr>
<tr>
<td>Node.js</td>
<td>Sentiment analysis API</td>
<td><a target="_blank" rel="noopener" href="https://github.com/xenova/transformers.js/blob/HEAD/examples/node/">code</a></td>
</tr>
</tbody></table>
<blockquote>
<p>下一章就开始讲解如何使用这个框架构建我们自己的ai网站。<a target="_blank" rel="noopener" href="https://juejin.cn/spost/7308725917454598198">Transformers.js：Web 上的最新机器学习技术（2）</a></p>
</blockquote>
<h2 id="开始尝试"><a href="#开始尝试" class="headerlink" title="开始尝试"></a>开始尝试</h2><h3 id="语音转文本"><a href="#语音转文本" class="headerlink" title="语音转文本"></a>语音转文本</h3><img data-src="/AI/Transformers-js-1/12.awebp" class="">

<p>对于我们第一个示例，只有几行代码，模仿OpenAi whisper在浏览器中实现自动语音识别。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;module&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 1. 从cdn导入transformers库，原文使用jsdelivr，由于墙的原因，使用unpkg代替</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">import</span> &#123; pipeline &#125; <span class="keyword">from</span> <span class="string">&#x27;https://unpkg.com/@xenova/transformers@2.8.0/dist/transformers.min.js&#x27;</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 2. 创建自动语音识别流水线（ASR）</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 并将Hugging Face Hub的模型id作为第二个参数</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> transcriber = <span class="keyword">await</span> <span class="title function_">pipeline</span>(<span class="string">&#x27;automatic-speech-recognition&#x27;</span>, <span class="string">&#x27;Xenova/whisper-tiny&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        </span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 3. 最后一步是将音频文件传递给pipeline</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 可以用手机或者电脑录一段音频，丢到当前文件夹，我这里自己录了一段</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> output = <span class="keyword">await</span> <span class="title function_">transcriber</span>(<span class="string">&#x27;test.m4a&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(output)</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">document</span>.<span class="title function_">write</span>(output.<span class="property">text</span>)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img data-src="/AI/Transformers-js-1/13.awebp" class="">

<blockquote>
<p>我说的是生活就像海洋，只有意志坚定的人才能到达彼岸。可能是我的普通话不够标准吧哈哈哈哈，</p>
</blockquote>
<p>随后将会重复使用这个模型，当然如果觉得中文准确性不够高，可以换个大一点的模型，并且可以选择是否翻译成英语。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;module&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 1. 从cdn导入transformers库，原文使用jsdelivr，由于墙的原因，使用unpkg</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">import</span> &#123; pipeline &#125; <span class="keyword">from</span> <span class="string">&#x27;https://unpkg.com/@xenova/transformers@2.8.0/dist/transformers.min.js&#x27;</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 2. 创建自动语音识别流水线（ASR）</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 并将Hugging Face Hub的模型id作为第二个参数</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> transcriber = <span class="keyword">await</span> <span class="title function_">pipeline</span>(<span class="string">&#x27;automatic-speech-recognition&#x27;</span>, <span class="string">&#x27;Xenova/whisper-small&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        </span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 3. 最后一步是将音频文件传递给pipeline</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 可以用手机或者电脑录一段音频，丢到当前文件夹，我这里自己录了一段</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> chineseOutput = <span class="keyword">await</span> <span class="title function_">transcriber</span>(<span class="string">&#x27;test.m4a&#x27;</span>, &#123;<span class="attr">language</span>: <span class="string">&#x27;chinese&#x27;</span>&#125;)</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(chineseOutput)</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">document</span>.<span class="title function_">write</span>(chineseOutput.<span class="property">text</span> + <span class="string">&#x27;&lt;br&gt;&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> englishOutput = <span class="keyword">await</span> <span class="title function_">transcriber</span>(<span class="string">&#x27;test.m4a&#x27;</span>, &#123;<span class="attr">language</span>: <span class="string">&#x27;chinese&#x27;</span>, <span class="attr">task</span>: <span class="string">&#x27;translate&#x27;</span>&#125;)</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(englishOutput)</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">document</span>.<span class="title function_">write</span>(englishOutput.<span class="property">text</span> + <span class="string">&#x27;&lt;br&gt;&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img data-src="/AI/Transformers-js-1/14.awebp" class="">

<h3 id="物体检测"><a href="#物体检测" class="headerlink" title="物体检测"></a>物体检测</h3><p>接下来我们尝试一下视觉任务，比如物体检测。</p>
<img data-src="/AI/Transformers-js-1/15.awebp" class="">

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 2. 创建对象检测流水线，这里不指定模型</span></span><br><span class="line"><span class="comment">// ，默认使用Facebook的轻量级目标检测转换器（DETR）</span></span><br><span class="line"><span class="comment">// 也就是ID为：Xenova/detr-resnet-50 这个模型</span></span><br><span class="line"><span class="keyword">const</span> detector = <span class="keyword">await</span> <span class="title function_">pipeline</span>(<span class="string">&#x27;object-detection&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 将图像传递给流水线，并可以指定其他参数</span></span><br><span class="line"><span class="comment">// 比如阈值，以及边界框按百分比还是像素返回</span></span><br><span class="line"><span class="keyword">const</span> output = <span class="keyword">await</span> <span class="title function_">detector</span>(<span class="string">&#x27;cat.jpg&#x27;</span>, &#123; <span class="attr">threshold</span>: <span class="number">0.9</span>, <span class="attr">percentage</span>: <span class="literal">true</span> &#125;)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(output)</span><br><span class="line"><span class="comment">// 比如我用一个猫咪的图片得到的结果：</span></span><br><span class="line"><span class="comment">// [</span></span><br><span class="line"><span class="comment">//     &#123;</span></span><br><span class="line"><span class="comment">//         &quot;score&quot;: 0.9989897608757019,</span></span><br><span class="line"><span class="comment">//         &quot;label&quot;: &quot;cat&quot;,</span></span><br><span class="line"><span class="comment">//         &quot;box&quot;: &#123;</span></span><br><span class="line"><span class="comment">//             &quot;xmin&quot;: 0.36215442419052124,</span></span><br><span class="line"><span class="comment">//             &quot;ymin&quot;: 0.18427562713623047,</span></span><br><span class="line"><span class="comment">//             &quot;xmax&quot;: 0.8893325924873352,</span></span><br><span class="line"><span class="comment">//             &quot;ymax&quot;: 0.8793745040893555</span></span><br><span class="line"><span class="comment">//         &#125;</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">// ]</span></span><br></pre></td></tr></table></figure>

<p>流水线的输出包含场景中检测到的每个物体信息的json，包括置信度、标签、边界框。</p>
<img data-src="/AI/Transformers-js-1/16.awebp" class="">

<p>完成机器学习方面的工作之后，我们可以再添加一些代码，允许用户上传图像，并呈现预测的边界框</p>
<img data-src="/AI/Transformers-js-1/17.awebp" class="">

<p>对于感兴趣的小伙伴</p>
<p><a target="_blank" rel="noopener" href="https://huggingface.co/docs/transformers.js/tutorials/vanilla-js">这里有手把手教你编写这样一个网页的教程</a>，</p>
<p><a target="_blank" rel="noopener" href="https://github.com/xenova/transformers.js/tree/main/examples/vanilla-js">这个是源码</a>，</p>
<p><a target="_blank" rel="noopener" href="https://huggingface.co/spaces/Scrimba/vanilla-js-object-detector">这个是demo体验网站</a></p>
<h3 id="其他的一些流水线"><a href="#其他的一些流水线" class="headerlink" title="其他的一些流水线"></a>其他的一些流水线</h3><p>目前为止我们支持了21种不同的流水线，并且还持续添加新的流水线。</p>
<img data-src="/AI/Transformers-js-1/18.awebp" class="">

<p>比如最近发布了文本到语音的支持，与当前浏览器内置的语音合成api相比，明显不那么机械，就在上周（视频发布的时间），我们增加了超分辨率和图像修复。</p>
<p>如果你要寻找transformers.js兼容的模型，打开：<a target="_blank" rel="noopener" href="https://hf.co/models">hf.co&#x2F;models</a> ，选择libraries-Transformers.js</p>
<img data-src="/AI/Transformers-js-1/19.awebp" class="">

<p>然后可以点击回到task选择你需要的流水线类型</p>
<h2 id="我能在哪里使用Transformers-js"><a href="#我能在哪里使用Transformers-js" class="headerlink" title="我能在哪里使用Transformers.js"></a>我能在哪里使用Transformers.js</h2><p>你可能会问，我能在哪里用上transformers.js?</p>
<p>目前最主要的还是Web端和PWA应用，他们都不需要用户安装，这也是为什么web会是开发者的首选目标。除此之外，浏览器提供了非常多的API，并且运行在安全的沙箱环境中。另一个好处是您不需要担心服务器成本，像前面的所有演示应用一样，你可以将应用作为静态网站免费部署到GithubPages、HuggingFaceSpace（vercel也是挺好的选择）。</p>
<p>当然如果开发者不一样切换到完全静态的网站，使用一些混合的方式也可以减轻成本，对于开发者来说，浏览器插件、服务端和类似Electron这样的框架也是非常合适的选择。</p>
<img data-src="/AI/Transformers-js-1/20.awebp" class="">

<p>比如一个浏览器插件：PaperClip，当你选择一段pdf或者网页里的文本进行收藏之后，它能允许你用自然语言对之前已经收藏过的文本进行搜索。多亏了ai，你的任何数据都不会发送到外部API或者服务器。</p>
<p>虽然一开始Transformers.js并不是针对服务端开发的，但是随着发展，GithubIssue上提出了这方面的巨大需求。感谢这些issue，提供了Node.js和Deno相关的支持。这也是为什么在后端中JavaScript变得如此流行。</p>
<p>另一个有趣的用例是边缘计算里的机器学习，更具体的说，transformers.js能用于边缘计算函数，部署到边缘计算的代码足够小、轻量化，并以极低的延时完成特定的任务。Superbase在这方面有一篇很好的文章，它展示了在边缘函数中生成高质量的文本嵌入，强烈推荐你看一下！</p>
<h2 id="自定义模型"><a href="#自定义模型" class="headerlink" title="自定义模型"></a>自定义模型</h2><p>假如你已经训练了自己自定义的模型，比如PyTorch、JAX、TensorFlow模型，你需要使用前文提到的Optimum库转换成ONNX模型。下面是官方文档教程：</p>
<p><a target="_blank" rel="noopener" href="https://huggingface.co/docs/transformers.js/custom_usage">https://huggingface.co/docs/transformers.js/custom_usage</a></p>
<p>总的来说就是：</p>
<ol>
<li>下载github仓库，找到scripts子文件夹</li>
<li>安装必要的依赖</li>
<li>运行script.convert脚本将你模型转成ONNX模型</li>
<li>访问<a href="hf.co/new">hf.co&#x2F;new</a>，创建仓库，上传模型</li>
<li>将Transformers.js标签添加到模型卡片上，以便其他人能搜索到你上传的模型。</li>
<li>测试你的模型（可以直接在node中运行）</li>
</ol>
<h2 id="Transformer-js的未来是什么"><a href="#Transformer-js的未来是什么" class="headerlink" title="Transformer.js的未来是什么"></a>Transformer.js的未来是什么</h2><img data-src="/AI/Transformers-js-1/21.awebp" class="">

<p>首先是添加新的任务和模型，对于比较流行的用例，力图实现和Python库一样能力。</p>
<p>接下来，无疑是最令人期待的更新，就是WebGPU的支持。onnxruntime-web发布了带有实验性的WebGPU后端，在进行更多的测试后，您很快就能看到使用基于WebGPU的Transformers.js应用。目前由于protobuf和WASM的限制，Transformers.js的模型限制在2GB以内，也就是说一些流行的大语言模型无法运行，比如llama-7b。</p>
<p>幸运的是社区正在努力克服这些约束，我们还计划改进与下一个Web浏览器的整合，下一代浏览器将以科学计算和AI API为焦点。比如，可以想象一个基于浏览器的模型商店，类似Chrome的拓展商城，他们可以在HuggingFaceHub上寻找到兼容的模型，点击按钮安装它，并在各个网页中使用它。现在Transformers.js在这方面还受到限制，为此每个站点或者每个拓展都会缓存一次模型。</p>
<p>以上就是来自Joshua对于Transformers.js的分享。</p>

    </div>

    
    
    

    <footer class="post-footer">
          

<div class="post-copyright">
<ul>
  <li class="post-copyright-author">
      <strong>本文作者： </strong>Wyatex
  </li>
  <li class="post-copyright-link">
      <strong>本文链接：</strong>
      <a href="https://wyatex.online/AI/Transformers-js-1/" title="使用Transformers.js在Web上进行机器学习">https://wyatex.online/AI/Transformers-js-1/</a>
  </li>
  <li class="post-copyright-license">
      <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

          <div class="post-tags">
              <a href="/tags/JavaScript/" rel="tag"># JavaScript</a>
              <a href="/tags/AI/" rel="tag"># AI</a>
              <a href="/tags/Machine-Learning/" rel="tag"># Machine Learning</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/Flutter/FlutterCourse-1/" rel="prev" title="面向Vue开发者的Flutter教程（1）">
                  <i class="fa fa-angle-left"></i> 面向Vue开发者的Flutter教程（1）
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/Rust/rust-note-course-1/" rel="next" title="Rust圣经学习笔记（1）">
                  Rust圣经学习笔记（1） <i class="fa fa-angle-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">

  <div class="copyright">
    &copy; 2019 – 
    <span itemprop="copyrightYear">2024</span>
    <span class="with-love">
      <i class="fa fa-heart"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">Wyatex</span>
  </div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>

    </div>
  </footer>

  
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script size="300" alpha="0.6" zIndex="-1" src="/lib/ribbon.js/dist/ribbon.min.js"></script>
  <script src="/lib/animejs/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="/lib/@next-theme/pjax/pjax.min.js" integrity="sha256-vxLn1tSKWD4dqbMRyv940UYw4sXgMtYcK6reefzZrao=" crossorigin="anonymous"></script>
  <script src="/lib/@fancyapps/ui/dist/fancybox/fancybox.umd.js" integrity="sha256-q8XkJ6dj5VwSvzI8+nATCHHQG+Xv/dAZBCgqmu93zOY=" crossorigin="anonymous"></script>
  <script src="/lib/lozad/dist/lozad.min.js" integrity="sha256-mOFREFhqmHeQbXpK2lp4nA3qooVgACfh88fpJftLBbc=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script><script src="/js/pjax.js"></script>

  <script src="/lib/hexo-generator-searchdb/dist/search.js" integrity="sha256-1kfA5uHPf65M5cphT2dvymhkuyHPQp5A53EGZOnOLmc=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>




  <script src="/js/third-party/fancybox.js"></script>



  
  <script data-pjax async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





</body>
</html>
